<template>
  <div class="flex-h flex-vc consume-item-wrapper">
    <img :src="iconUrl">
    <div class="flex1">
      <span class="fontsize28">{{tradeText}}</span>
      <p>{{data.TRADE_TIME|formatData}}</p>
    </div>
    <div class="flex-v flex-ve">
      <span class="fontsize34">{{payFeeDesc}}</span>
      <p :class="stateStyle">&nbsp;{{stateDesc}}</p>
    </div>
  </div>
</template>

<script>
import { dateFtt } from 'vue-xiaobu-utils'
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      tradeDetailType: -1, // 交易详情类型
      payPrice: '', // 获取到的价格
      state: '', // 状态码
      stateStyle: '', // 状态描述的样式
      iconUrl: '', // 类型图标
      tradeText: '', // 交易描述
      payFeeDesc: '', // 展示的价格
      stateDesc: '' // 状态描述
    }
  },
  computed: {
    isStaffCard() {
      if (this.data.CARD_INSTANCE_ID === 'jhx_staffcard') {
        return true
      }
      return false
    },
    cardName() {
      return this.data.CARD_TYPE_NAME
    }
  },
  watch: {
    tradeDetailType(newValue, oldValue) {

    }
  },
  filters: {
    formatData(date) {
      // date = '2019-03-17 12:11:02'
      // 传入的日期的毫秒数
      let createDate = new Date(date)
      let time = createDate.getTime()
      let today = new Date()
      let ms = 1000 * (today.getHours() * 3600 + today.getMinutes() * 60 + today.getSeconds())
      // 今天的日期的毫秒数
      let msToday = today.getTime()
      let ret = ''
      if (msToday - time < ms) {
        ret = '今天 ' + createDate.getHours() + ':' + createDate.getMinutes()
      } else if (msToday - time < (ms + 24 * 3600 * 1000)) {
        ret = '昨天 ' + createDate.getHours() + ':' + createDate.getMinutes()
        // } else if (ms_today - time < (ms + 24 * 3600 * 1000 * 2)) {
        //   ret = '前天'
      } else if (createDate.getFullYear() === today.getFullYear()) {
        ret = dateFtt('MM月dd日 hh:mm', date)
      } else {
        ret = dateFtt('yyyy年MM月dd日 hh:mm', date)
      }
      return ret
    }
  },
  mounted() {
    this.setData()
  },
  methods: {
    setData() {
      this.stateDesc = ''
      this.stateStyle = ''
      this.tradeDetailType = this.data.TRADE_DETAIL_TYPE
      this.payPrice = this.data.PAY_FEE.toFixed(2)
      this.state = this.data.STATE
      // this.state = -2
      switch (this.state) {
        case -2:
          // 失败
          this.parseWhenTradeFailure()
          break
        case -1:
          // 已退款
          this.parseWhenTradeRefund()
          break
        case 0:
          // 成功
          this.parseWhenTradeSuccess()
          break
        case 1:
          // 交易中
          this.parseWhenTrading()
          break
      }
    },
    // 交易失败
    parseWhenTradeFailure() {

    },
    // 交易退款
    parseWhenTradeRefund() {

    },
    // 交易成功
    parseWhenTradeSuccess() {
      this.payFeeDesc = '+' + this.payPrice
    },
    // 交易中
    parseWhenTrading() {

    }
  }
}
</script>

<style>
.consume-item-wrapper {
  height: 140px;
  margin: 0 30px;
  color: #333333;
  line-height: 1.4;
  background-color: #ffffff;
  font-size: 22px; /*px*/
}
.consume-item-wrapper > img {
  width: 80px;
  height: 80px;
  margin-right: 30px;
}
.consume-item-wrapper p {
  color: #999999;
}
</style>
